'use client';

import React from 'react';
import { Modal, Descriptions, Tag, Space } from 'antd';
import { UserOutlined, PhoneOutlined, MailOutlined, TeamOutlined } from '@ant-design/icons';

interface UserInfo {
  id: string;
  name: string;
  phone: string;
  email: string;
  department: string;
  university: string;
  userLevel: string;
  team?: string;
  status: 'normal' | 'disabled';
  balance: number;
  idNumber?: string;
  address?: string;
}

interface UserInfoModalProps {
  open: boolean;
  onClose: () => void;
  userInfo: UserInfo | null;
}

const UserInfoModal: React.FC<UserInfoModalProps> = ({
  open,
  onClose,
  userInfo,
}) => {
  if (!userInfo) return null;

  return (
    <Modal
      title={
        <Space>
          <UserOutlined />
          用户信息
        </Space>
      }
      open={open}
      onCancel={onClose}
      footer={null}
      width={600}
    >
      <Descriptions column={2} bordered>
        <Descriptions.Item label="姓名" span={1}>
          <Space>
            <UserOutlined style={{ color: '#69cac3' }} />
            {userInfo.name}
          </Space>
        </Descriptions.Item>
        
        <Descriptions.Item label="手机号" span={1}>
          <Space>
            <PhoneOutlined style={{ color: '#69cac3' }} />
            {userInfo.phone}
          </Space>
        </Descriptions.Item>
        
        <Descriptions.Item label="邮箱" span={2}>
          <Space>
            <MailOutlined style={{ color: '#69cac3' }} />
            {userInfo.email}
          </Space>
        </Descriptions.Item>
        
        <Descriptions.Item label="院系" span={1}>
          {userInfo.department}
        </Descriptions.Item>
        
        <Descriptions.Item label="高校/研究所" span={1}>
          {userInfo.university}
        </Descriptions.Item>
        
        <Descriptions.Item label="用户级别" span={1}>
          <Tag color="#69cac3">{userInfo.userLevel}</Tag>
        </Descriptions.Item>
        
        <Descriptions.Item label="状态" span={1}>
          <Tag color={userInfo.status === 'normal' ? 'green' : 'red'}>
            {userInfo.status === 'normal' ? '正常' : '禁用'}
          </Tag>
        </Descriptions.Item>
        
        {userInfo.team && (
          <Descriptions.Item label="团队" span={2}>
            <Space>
              <TeamOutlined style={{ color: '#69cac3' }} />
              {userInfo.team}
            </Space>
          </Descriptions.Item>
        )}
        
        <Descriptions.Item label="账户余额" span={1}>
          <span style={{ color: '#69cac3', fontWeight: 'bold' }}>
            ¥{userInfo.balance.toFixed(2)}
          </span>
        </Descriptions.Item>
        
        {userInfo.idNumber && (
          <Descriptions.Item label="身份证号" span={1}>
            {userInfo.idNumber.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')}
          </Descriptions.Item>
        )}
        
        {userInfo.address && (
          <Descriptions.Item label="地址" span={2}>
            {userInfo.address}
          </Descriptions.Item>
        )}
      </Descriptions>
    </Modal>
  );
};

export default UserInfoModal; 